<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>Diagram builder</title>

	<script src='/DiagramBuilder/dwr/interface/diagramRenderer.js'></script>
	<script src='/DiagramBuilder/dwr/engine.js'></script>
</head>
<body>
	<table>
	<tr>
	<td>
		Please enter diagram description:<br>
		<textarea id="descriptionInput" rows="15" cols="60"></textarea> <br/>
		Output format:
		<select id="imageFormatInput">
			<option selected="selected">PNG</option>
			<option>SVG</option>
		</select><br><br>
		<input id="generateButton" type="button" value="Generate diagram" onclick="generateDiagram();"/><br/><br/>
		
		<span id="status"></span><br/>
	</td>
	<td valign="top" style="font: small">
			Quick reference:
		<pre style="background-color: #FFF8C6; display: block; font-family: monospace; margin: 0px 10px; padding: -30px 10px">		
A-&gt;B: "text"
A&lt;-&gt;B: "text"
A&lt;-B: "text"
A--&gt;B: "text"
A,B,C  within D (eq D contains A,B,C)
group A,B,C into "text"
B,D appearance is "appearance Name" 
	(where appearanceName="square|ellipse|point|diamond")
B,A color is "colorName" 
	(where styleName="red|green|blue|RGB(r,g,b)")
style "styleName" is "appearanceName" appearance and "colorName" color
B,C ,D style is "styleName"	
layout as "layoutName" 
	where layoutName="ring|star|grid|auto")
		</pre>
		<a href="#" onclick="showExample();">Show example</a>	
	</td>
	</tr>
	<tr><td colspan="2">
		<img id="diagramImage" style="visibility: hidden;"/><br/>
	</td></tr>
	</table>

	<script>

		var diaImage = document.getElementById("diagramImage");
		var statusBar = document.getElementById("status");
		var descriptionInput = document.getElementById("descriptionInput");
		var imageFormatInput = document.getElementById("imageFormatInput");
		var generateButton = document.getElementById("generateButton");		
		
		function generateDiagram() {
			var diagramDescription = descriptionInput.value;
			if (diagramDescription == null || diagramDescription == "") { 
				alert("Diagram description can't be empty");
				return;
			}
			statusBar.innerHTML="Rendering, please wait...";
			diaImage.style.visibility="hidden";
			var webroot = "C:/WORK/workspace/text2diagram/.metadata/.plugins/org.eclipse.wst.server.core/tmp0/wtpwebapps/DiagramBuilder/";
			var diagramName = "testDiagram";
			var imageFormat = imageFormatInput.options[imageFormatInput.selectedIndex].value;
			var outputDir = webroot + "images/";
			
			var callback = function() {
				diaImage.src="/DiagramBuilder/images/" + diagramName + "." + imageFormat.toLowerCase() + "?" + (new Date()).getTime();
				diaImage.style.visibility="visible";
				statusBar.innerHTML="Rendering is over, you should now see your diagram image below";
			};

			diagramRenderer.render(diagramName, imageFormat, outputDir, diagramDescription, callback);
		}

		function showExample() {
			var example = 
				"Project -> Task: consists of\n" +
				"Developer <-- Task: implemented by\n" +
				"Manager --> Project: responsible for\n" +
				"Developer <-> Manager: communicate daily\n" +
				"Developer --> Project: assigned to\n" +
				"Project color is blue\n" +
				"Developer appearance is oval\n" +
				"group Developer,Manager into Stuff\n" +
				"layout as AUTO";
			descriptionInput.value=example;
			generateButton.click();
		}
	</script>


</body>
</html>